<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入 Element UI 的 CSS 文件 -->
    <link rel="stylesheet" href="/element-ui/index.css">
    <style>
        body {
            padding: 20px;
        }
    </style>
</head>

<body>
<div id="app">
    <!-- 查询条件 -->
    <!-- 修改为使用 el-form-item -->
    <div class="search-box">
        <!-- 设置固定的 label-width 让 input 框上下对齐 -->
        <el-form :inline="true" :model="searchForm" label-width="100px" label-position="right">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="人员代码">
                        <el-input v-model="searchForm.RYDM"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="人员名称">
                        <el-input v-model="searchForm.PERSON_NAME"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <!-- 修改父级 el-row 布局 -->
                <el-row type="flex" justify="end">
                    <el-col :span="8">
                        <el-form-item>
                            <el-button @click="search">查询</el-button>
                            <el-button @click="resetSearch">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-row>
        </el-form>
    </div>
    <el-table :data="dataList" style="width: 100%"> <!-- 设置表格高度，可根据实际情况调整 -->
        <el-table-column label="序号" width="80" align="center">
            <template slot-scope="scope">{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="RYDM" label="人员代码" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="PERSON_NAME" label="人员名称" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="SJHM" label="手机号码" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="GLUSERBJ" label="系统管理员" show-overflow-tooltip align="center">
            <template slot-scope="scope">
                <el-switch v-model="scope.row.GLUSERBJ===0" active-color="#ff4949" inactive-color="#13ce66"></el-switch>
                <span v-if="scope.row.GLUSERBJ===0" style="color:lightsteelblue;">否</span>
                <span v-if="scope.row.GLUSERBJ===1" style="color:green;">是</span>
            </template>
        </el-table-column>
        <el-table-column prop="ZFBJ" label="账号状态" show-overflow-tooltip align="center">
            <template slot-scope="scope">
                <el-switch v-model="scope.row.ZFBJ===0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                <span v-if="scope.row.ZFBJ===0" style="color:green;">启用</span>
                <span v-if="scope.row.ZFBJ===1" style="color:red;">停用</span>
            </template>
        </el-table-column>
        <el-table-column prop="LAST_TIME" label="上次登录时间" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="ERRORCOUNT" label="错误登录次数" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="LASTERROR" label="最后错误登录时间" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="ROLE_NAMES" label="角色信息" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="option" label="操作" min-width="120" align="center">
            <template slot-scope="scope">
                <el-button @click="gotoDetail(scope.row)" type="text" size="small" style="color:green">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 详情页弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="用户详情">
        <el-tabs v-model="activeTab">
            <el-tab-pane label="基本信息" name="base">
                <p>人员代码: {{ detailInfo.RYDM }}</p>
                <p>人员名称: {{ detailInfo.PERSON_NAME }}</p>
                <p>系统管理员: {{ detailInfo.GLUSERBJ === 0 ? '否' : '是' }}</p>
                <p>账号状态: {{ detailInfo.ZFBJ === 0 ? '启用' : '停用' }}</p>
                <!-- 可根据需求添加更多基本信息 -->
            </el-tab-pane>
            <el-tab-pane label="角色信息" name="role">
                <el-table :data="roleList" style="width: 100%; height: 300px; overflow-y: auto;" ref="roleTable"> <!-- 添加 ref 属性 -->
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column prop="ROLE_ID" label="角色ID" show-overflow-tooltip align="center" sortable></el-table-column>
                    <el-table-column prop="ROLE_NAME" label="角色名称" show-overflow-tooltip align="center" sortable></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="二级商品分类信息" name="spfl2">
                <el-table :data="spfl2List" style="width: 100%; height: 300px; overflow-y: auto;" ref="spfl2Table"> <!-- 添加 ref 属性 -->
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column prop="SPFLDM" label="商品分类代码" show-overflow-tooltip align="center" sortable></el-table-column>
                    <el-table-column prop="SPFLMC" label="商品分类名称" show-overflow-tooltip align="center" sortable></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="人员分店信息" name="fd">
                <el-table :data="fdList" style="width: 100%; height: 300px; overflow-y: auto;" ref="fdTable"> <!-- 添加 ref 属性 -->
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <!-- 修改为根据 FDBH 排序 -->
                    <el-table-column prop="FDBH" label="分店信息" show-overflow-tooltip align="center" sortable><template slot-scope="scope">{{ scope.row.FDMC }}({{ scope.row.FDBH }})</template></el-table-column>
                    <!-- 修改为根据 QYBH 排序 -->
                    <el-table-column prop="QYBH" label="区域信息" show-overflow-tooltip align="center" sortable><template slot-scope="scope">{{ scope.row.QYMC }}({{ scope.row.QYBH }})</template></el-table-column>
                    <!-- 修改为根据 TX 排序 -->
                    <el-table-column prop="TX" label="体系信息" show-overflow-tooltip align="center" sortable><template slot-scope="scope">{{ scope.row.TXMC }}({{ scope.row.TX }})</template></el-table-column>
                    <el-table-column prop="FDLXDM" label="分店类型" show-overflow-tooltip align="center" sortable></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
    <!-- 完整的分页组件 -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
    >
    </el-pagination>
</div>
<!-- 引入 Vue 和 Element UI 的 JS 文件 -->
<script src="/element-ui/Vue.js"></script>
<script src="/element-ui/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                searchForm: {
                    page: '1',
                    rows: '10',
                    RYDM: '',
                    PERSON_NAME: ''
                },
                currentPage: 1,
                pageSize: 10,
                dataList: [],
                dialogVisible: false,
                detailInfo: {},
                activeTab: 'base',
                roleList: [],
                spfl2List: [],
                fdList: [],
                selectionRoleKeys: [],
                selectionSpfl2Keys: [],
                selectionFdKeys: [],
            };
        },
        mounted() {
            // 调用搜索方法获取数据
            this.search(true);
            // 添加键盘事件监听
            window.addEventListener('keydown', this.handleKeyDown);


        },
        beforeDestroy() {
            // 移除键盘事件监听，防止内存泄漏
            window.removeEventListener('keydown', this.handleKeyDown);
        },
        methods: {
            search(resetPage = false) {
                if (resetPage) {
                    // 仅在需要时将页码重置为 1
                    this.currentPage = 1;
                }
                this.searchForm.page = this.currentPage.toString();
                this.searchForm.rows = this.pageSize.toString();

                // 使用 fetch API 从接口获取数据
                fetch('/admin/pageListUser', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.searchForm)
                })
                    .then(response => response.json())
                    .then(data => {
                        this.dataList = data.data.list
                        this.total = data.data.total
                    })
                    .catch(error => {
                        console.error('获取数据时出错:', error);
                    });
            },
            handleCurrentChange(page) {
                this.currentPage = page;
                this.search();
            },
            handleSizeChange(size) {
                this.pageSize = size;
                this.search();
            },
            resetSearch() {
                this.searchForm = {
                    page: '1',
                    rows: '10'
                };
                this.currentPage = 1;
                this.pageSize = 10;
                this.search(true);
            },
            handleKeyDown(event) {
                if (event.key === 'Enter') {
                    this.search(true);
                }
            },
            gotoDetail(row) {
                this.detailInfo = row;
                this.dialogVisible = true;
                const RYDM = row.RYDM;

                // 获取角色信息
                fetch(`/admin/pageListRole`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({})
                })
                    .then(response => response.json())
                    .then(data => {
                        this.roleList = data.data.list;
                        // 回显当前用户的角色
                        fetch(`/admin/pageListRole`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({"RYDM": RYDM})
                        })
                            .then(response => response.json())
                            .then(data => {
                                this.selectionRoleKeys = data.data.list.map(item => item.ROLE_ID);
                                this.$nextTick(() => {
                                    this.roleList.forEach(row => {
                                        if (this.selectionRoleKeys.includes(row.ROLE_ID)) {
                                            this.$refs.roleTable.toggleRowSelection(row, true);
                                        }
                                    });
                                });
                            })
                            .catch(error => {
                                console.error('获取角色信息时出错:', error);
                            });
                    })
                    .catch(error => {
                        console.error('获取角色信息时出错:', error);
                    });

                // 获取二级商品分类信息
                fetch(`/admin/pageListSpfl2`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({})
                })
                    .then(response => response.json())
                    .then(data => {
                        this.spfl2List = data.data.list;
                        // 回显 二级商品分类信息
                        fetch(`/admin/pageListSpfl2`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({"RYDM": RYDM})
                        })
                            .then(response => response.json())
                            .then(data => {
                                this.selectionSpfl2Keys = data.data.list.map(item => item.SPFLDM);
                                this.$nextTick(() => {
                                    this.spfl2List.forEach(row => {
                                        if (this.selectionSpfl2Keys.includes(row.SPFLDM)) {
                                            this.$refs.spfl2Table.toggleRowSelection(row, true);
                                        }
                                    });
                                });
                            })
                            .catch(error => {
                                console.error('获取二级商品分类信息时出错:', error);
                            });
                    })
                    .catch(error => {
                        console.error('获取二级商品分类信息时出错:', error);
                    });

                // 获取人员分店信息
                fetch(`/admin/pageListFd`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({})
                })
                    .then(response => response.json())
                    .then(data => {
                        this.fdList = data.data.list;
                        // 回显 人员分店信息
                        fetch(`/admin/pageListFd`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({"RYDM": RYDM})
                        })
                            .then(response => response.json())
                            .then(data => {
                                this.selectionFdKeys = data.data.list.map(item => item.FDBH);
                                this.$nextTick(() => {
                                    this.fdList.forEach(row => {
                                        if (this.selectionFdKeys.includes(row.FDBH)) {
                                            this.$refs.fdTable.toggleRowSelection(row, true);
                                        }
                                    });
                                });
                            })
                            .catch(error => {
                                console.error('获取人员分店信息时出错:', error);
                            });
                    })
                    .catch(error => {
                        console.error('获取人员分店信息时出错:', error);
                    });
            }
        }
    });
</script>
</body>

</html>
